<script lang="ts" setup>
  import { computed, onMounted, PropType, ref, watch } from 'vue'
  import { CodeScanSet, CodeScanSetData, RenderFixedArea } from '../../../types'
  import { Picture } from '@element-plus/icons-vue'
  import bannerImg from '@/assets/rice_cooker.jpeg'

  const props = defineProps({
    sets: {
      type: Object as PropType<Array<CodeScanSet>>,
      required: true,
    },
  })

  const color = ref('')

  // 基本选项和大图的数据结构，便于渲染
  const fixedArea = computed(() => {
    const result: RenderFixedArea = {
      header: { title: '', logoUrl: '' },
      btnGroup: { register: false, repairReport: false },
      banner: { imgList: [], show: false },
    }

    props.sets.forEach((set) => {
      // 基本选项
      if (set.type === 1) {
        set.data.forEach((setItem) => {
          // 左侧logo
          if (setItem.dataType === 2) {
            result.header.title = setItem.val as string
          }

          // 右侧标题
          if (setItem.dataType === 3) {
            result.header.logoUrl = setItem.val as string
          }

          // 登记按钮
          if (setItem.dataType === 4) {
            result.btnGroup.register = setItem.show
          }

          // 报修按钮
          if (setItem.dataType === 5) {
            result.btnGroup.repairReport = setItem.show
          }
        })
      }

      // 大图
      if (set.type === 2) {
        set.data.forEach((setItem) => {
          result.banner.show = setItem.show
          result.banner.imgList = setItem.val as Array<string>
        })
      }
    })

    return result
  })

  // 按钮取消聚焦事件
  const btnCancelFocus = (e: Event) => {
    ;(e.target as HTMLButtonElement).blur()
  }

  // 根据二级对象里的show属性来控制设置项的显示状态
  const isShowSet = (param: Array<CodeScanSetData>) => {
    let result = false
    param.forEach((item) => {
      if (item.show) {
        result = true
      }
    })
    return result
  }

  watch(
    () => props.sets,
    (value) => {
      value.forEach((set) => {
        if (set.type === 1) {
          set.data.forEach((setItem) => {
            if (setItem.dataType === 1) {
              color.value = setItem.val as string
            }
          })
        }
      })
    },
    { deep: true, immediate: true },
  )

  onMounted(() => {
    const iframeEl = document.getElementsByClassName('new_video')
  })
</script>

<template>
  <div class="phone_content">
    <div class="header">
      <!--logo-->
      <el-image :src="fixedArea.header.logoUrl" style="width: 40px; height: 40px">
        <template #error>
          <div class="image-slot">
            <el-icon>
              <Picture></Picture>
            </el-icon>
          </div>
        </template>
      </el-image>

      <!--标题-->
      <span class="title">{{ fixedArea.header.title }}</span>
    </div>

    <!--大图-->
    <div class="banner">
      <template v-if="fixedArea.banner.show">
        <template v-if="fixedArea.banner.imgList.length <= 0">
          <div class="banner">
            <el-image style="width: 100%; height: 180px" fit="fill" :src="bannerImg">
              <template #error>
                <div class="image-slot">
                  <el-icon size="36">
                    <Picture></Picture>
                  </el-icon>
                </div>
              </template>
            </el-image>
            <div :style="{ backgroundColor: color, color: '#fff' }" class="indicator">
              <span>1</span>
              <span>/</span>
              <span>5</span>
            </div>
          </div>
        </template>
        <template v-else>
          <template v-for="(img, imgIndex) in fixedArea.banner.imgList" :key="imgIndex">
            <div class="banner">
              <el-image :src="img" style="width: 100%; height: 369px">
                <template #error>
                  <div class="image-slot">
                    <el-icon size="36">
                      <Picture></Picture>
                    </el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </template>
        </template>
      </template>
    </div>

    <!--登记按钮、报修按钮-->
    <div
      v-if="fixedArea.btnGroup.register || fixedArea.btnGroup.repairReport"
      class="register_repair_report_btn"
    >
      <el-button
        v-if="fixedArea.btnGroup.register"
        class="btn_item"
        color="#00c0c0"
        type="success"
        @focus="btnCancelFocus"
        >登记激活产品
      </el-button>
      <el-button
        v-if="fixedArea.btnGroup.repairReport"
        class="btn_item"
        color="#007cff"
        type="primary"
        @focus="btnCancelFocus"
        >产品故障维修
      </el-button>
    </div>

    <!--其他设置-->
    <template v-for="(set, index) in props.sets" :key="index">
      <!--防伪序列号-->
      <template v-if="set.type === 4">
        <template v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
          <template v-if="setItem.show">
            <div class="security_coding">
              <div class="txt">
                <span>{{ setItem.name }}：</span>
                <span :style="{ color: color }">{{ setItem.val }}</span>
              </div>
              <el-button :color="color" class="copy_btn" type="warning" @focus="btnCancelFocus"
                >复制</el-button
              >
            </div>
          </template>
        </template>
      </template>

      <!--设备信息-->
      <template v-if="set.type === 3 && isShowSet(set.data)">
        <div class="good_info">
          <template v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <!--产品信息-->
            <template v-if="setItem.dataType === 1 && setItem.show">
              <div class="product_info">
                <template v-for="(info, infoIndex) in setItem.val" :key="infoIndex">
                  <template v-if="info === 1">
                    <div>
                      <span class="product_info_label">设备品牌：</span>
                      <span class="product_info_value">苏泊尔电饭煲</span>
                    </div>
                  </template>

                  <template v-else-if="info === 2">
                    <div>
                      <span class="product_info_label">设备分类：</span>
                      <span class="product_info_value">电器</span>
                    </div>
                  </template>

                  <template v-else-if="info === 3">
                    <div>
                      <span class="product_info_label">设备名称：</span>
                      <span class="product_info_value">电饭煲</span>
                    </div>
                  </template>

                  <template v-else>
                    <div>
                      <span class="product_info_label">设备型号：</span>
                      <span class="product_info_value">SY-50FH9072Q</span>
                    </div>
                  </template>
                </template>
              </div>
            </template>

            <!--设备规格-->
            <div class="specs" v-else-if="setItem.dataType === 2 && setItem.show">
              <div class="specs_label">规格：</div>
              <div class="specs_val">{{ setItem.val }}</div>
            </div>

            <!--设备货号-->
            <div class="article_no" v-else-if="setItem.dataType === 3 && setItem.show">
              <div class="article_no_label">货号：</div>
              <div class="article_no_value">{{ setItem.val }}</div>
            </div>

            <!--设备价格-->
            <template v-if="setItem.dataType === 4 && setItem.show">
              <div class="good_price" :style="{ color: color }">{{ setItem.val }}</div>
            </template>
          </template>
        </div>
      </template>

      <!--设备编号信息-->
      <template v-else-if="set.type === 5 && isShowSet(set.data)">
        <div class="product_code_info">
          <div class="info_item" v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <template v-if="setItem.show">
              <div class="info_item_name">{{ setItem.name }}：</div>
              <div class="info_item_value">{{ setItem.val }}</div>
            </template>
          </div>
        </div>
      </template>

      <!--设备编号登记信息-->
      <template v-else-if="set.type === 6 && isShowSet(set.data)">
        <div class="product_code_register_info">
          <div class="info_item" v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <template v-if="setItem.show">
              <div class="info_item_name">{{ setItem.name }}：</div>
              <div class="info_item_value">{{ setItem.val }}</div>
            </template>
          </div>
        </div>
      </template>

      <!--序列号登记字段参数-->
      <template v-else-if="set.type === 7 && isShowSet(set.data)">
        <div class="code_register_field_param">
          <div class="info_item" v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <template v-if="setItem.show">
              <div class="info_item_name">{{ setItem.name }}：</div>
              <div class="info_item_value">{{ setItem.val }}</div>
            </template>
          </div>
        </div>
      </template>

      <!--设备简介与参数说明-->
      <!--<template v-else-if="set.type === 8">-->
      <!--  <div class="param_explain">-->
      <!--    <el-tabs-->
      <!--      class="demo-tabs"-->
      <!--      style="width: 17vw"-->
      <!--    >-->
      <!--      <el-tab-pane-->
      <!--        v-for="(setItem, setItemIndex) in set.data"-->
      <!--        :key="setItemIndex"-->
      <!--        :label="setItem.name"-->
      <!--        :name="setItem.name"-->
      <!--      >{{setItem.val}}</el-tab-pane>-->
      <!--    </el-tabs>-->
      <!--  </div>-->
      <!--</template>-->

      <!--新增文字-->
      <template v-else-if="set.type === 9 && set.fieldType === 1 && isShowSet(set.data)">
        <div class="new_txt">
          <template v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <div
              class="title"
              :style="{
                display: 'flex',
                justifyContent:
                  setItem.align === 1 ? 'flex-start' : setItem.align === 2 ? 'center' : 'flex-end',
              }"
            >
              <div :style="{ borderBottomColor: color }">{{ setItem.name }}</div>
            </div>
            <div class="content">
              {{ setItem.val }}
            </div>
          </template>
        </div>
      </template>

      <!--新增图片-->
      <template v-else-if="set.type === 9 && set.fieldType === 2 && isShowSet(set.data)">
        <div class="new_img">
          <template v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <div
              class="title"
              :style="{
                display: 'flex',
                justifyContent:
                  setItem.align === 1 ? 'flex-start' : setItem.align === 2 ? 'center' : 'flex-end',
              }"
            >
              <div :style="{ borderBottomColor: color }">{{ setItem.name }}</div>
            </div>
            <div class="content">
              <el-image style="width: 100px; height: 100px" :src="setItem.val">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <Picture></Picture>
                    </el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </template>
        </div>
      </template>

      <!--新增视频-->
      <template v-else-if="set.type === 9 && set.fieldType === 3 && isShowSet(set.data)">
        <div class="new_video">
          <template v-for="(setItem, setItemIndex) in set.data" :key="setItemIndex">
            <div
              class="title"
              :style="{
                display: 'flex',
                justifyContent:
                  setItem.align === 1 ? 'flex-start' : setItem.align === 2 ? 'center' : 'flex-end',
              }"
            >
              <div :style="{ borderBottomColor: color }">{{ setItem.name }}</div>
            </div>
            <div class="content">
              <div v-html="setItem.val"></div>
            </div>
          </template>
        </div>
      </template>
    </template>
  </div>
</template>

<style lang="scss" scoped>
  iframe {
    width: 100% !important;
  }

  .image-slot {
    background: #f5f7fa;
    color: #909399;
    text-align: center;
    width: 100%;
    height: 100%;
  }

  //logo、标题
  .header {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px 10px;
    background-color: #fff;
    align-items: center;
    border-radius: 5px;

    .title {
      font-size: 14px;
      color: #505050;
    }

    .image-slot {
      line-height: 40px;
    }
  }

  //大图
  .banner {
    width: 100%;
    height: 180px;
    border-radius: 5px;
    margin-top: 5px;
    position: relative;

    .image-slot {
      line-height: 180px;
      background-color: #fff;
    }

    .indicator {
      width: 42px;
      height: 42px;
      position: absolute;
      bottom: 1vh;
      right: 0.5vw;
      border-radius: 42px;
      text-align: center;
      line-height: 42px;

      span:nth-child(1) {
        font-size: 24px;
      }

      span:nth-child(2),
      span:nth-child(3) {
        font-size: 18px;
      }
    }
  }

  //登记按钮、报修按钮
  .register_repair_report_btn {
    width: 100%;
    background-color: #fff;
    margin-top: 5px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    gap: 14px;

    .btn_item {
      margin: 0;
      color: #fff;
    }
  }

  //防伪序列号
  .security_coding {
    background-color: #fff;
    margin-top: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px 15px;
    align-items: center;

    .txt {
      color: #505050;
    }

    .copy_btn {
      width: 2.8vw;
      color: #fff;
    }
  }

  //设备信息
  .good_info {
    background-color: #fff;
    margin-top: 5px;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;

    .product_info {
      font-size: 13px;
      color: #505050;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .specs {
      color: #505050;
      font-size: 13px;
      margin-top: 7px;
      display: flex;
    }

    .article_no {
      color: #505050;
      font-size: 13px;
      margin-top: 7px;
      display: flex;
    }

    .good_price {
      font-size: 18px;
      margin-top: 7px;
    }
  }

  // 设备编号信息，设备编号登记信息，序列号登记字段参数
  .product_code_info,
  .product_code_register_info,
  .code_register_field_param {
    border-radius: 5px;
    margin-top: 5px;
    background-color: #fff;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;

    .info_item {
      color: #adadad;
      font-size: 12px;
      display: flex;

      .info_item_name {
        width: 6vw;
      }
    }
  }

  // 新增文字，新增图片，新增视频
  .new_txt,
  .new_img,
  .new_video {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    margin-top: 5px;

    .title {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #e5e5e5;

      div {
        font-size: 14px;
        color: #505050;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        margin: 0 20px;
      }
    }

    .content {
      width: 100%;
      min-height: 42px;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
  }

  // 新增文字
  .new_txt {
    .content {
      width: 100% !important;
      word-break: break-all;
    }
  }

  // 新增图片
  .new_img {
    .content {
      .image-slot {
        line-height: 100px;
      }
    }
  }

  // 新增视频
  .new_video {
    .content {
      :deep(iframe) {
        width: 100% !important;
        height: 20vh !important;
      }
    }
  }
</style>
